<template>
	<view class="bill_info_box">
		<view class="bill_info_type_icon">
			<view class="info_icon">
				<Avatar :isAllowPreview="true" radius="0rpx" size="300rpx" :fileName="estateInfo.img_url" :joinUrlFun="joinEstateImg"/>
			</view>
			<view class="estate_info_right">
				<view class="info_type_name text_ellipsis">
					{{estateInfo.name}}
				</view>
				<view class="info_money">
					{{changeNums(parseFloat(estateInfo.price),10000)}}元
				</view>
			</view>
		</view>
		<view class="info_footer">
			<view class="info_item">
				<view class="info_title">
					来自
				</view>
				<view class="info_data">
					<view class="info_avatar">
						<Avatar radius="50rpx" size="50rpx" :fileName="estateInfo.user.user_avatar"/>
					</view>
					<view class="info_user_name text_ellipsis">
						{{estateInfo.user.nick_name_by_dormitory}} 
					</view>
				</view>
			</view>
			<view class="info_item">
				<view class="info_title">
					时间
				</view>
				<view class="info_data">
					{{estateInfo.createAt}}
				</view>
			</view>
			
			<view class="info_item">
				<view class="info_title">
					账单
				</view>
				<view class="info_data link" @click="openBillInfoModal">
					{{changeStrHidden(estateInfo.bill?.bill_id,6)}}
				</view>
			</view>
			<view class="info_item">
				<view class="info_title">
					备注
				</view>
				<view class="info_data">
					{{estateInfo.info}}
				</view>
			</view>
		</view>
		<view class="info_handle" v-if="estateInfo.user.user_id === user_store.userInfo.id">
			<MyButton :clickFun="deleteFun" :bgc="primary_hot_color" fontSize="30rpx" width="250rpx" height="90rpx">
				删除
				<template #icon>
					<MyIcons size="40rpx" :src="joinSystemPath('delete.png')"/>
				</template>
			</MyButton>
			<MyButton :clickFun="editorFun" fontSize="30rpx" width="250rpx" height="90rpx">
				编辑
				<template #icon>
					<MyIcons size="40rpx" :src="joinSystemPath('editor.png')"/>
				</template>
			</MyButton>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {
		joinSystemPath,
		joinEstateImg
	} from '@/utils/imgJoinName.js'
	import {
		changeNums,
		changeStrHidden
	} from '@/utils/changeData.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {BillInOutType} from '@/enum/GlobalEnum.js'
	
	import Avatar from '@/components/Avatar/Avatar.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		shallow_text_color,
		primary_text_hot_color,
		primary_hot_color,
		primary_cool_color
	} = dynamicStyle_store.dormitoryStyle
	
	const props=defineProps({
		estateInfo:{
			type:Object
		}
	})
	const emits = defineEmits(['deleteEstateEmit','editorEstateEmit','openBillFlagFunEmit'])
	const deleteFun=()=>{
		emits('deleteEstateEmit')
	}
	const editorFun=()=>{
		emits('editorEstateEmit')
	}
	
	
	const openBillInfoModal=()=>{
		if(!props.estateInfo.bill?.bill_id) return
		emits('openBillFlagFunEmit',props.estateInfo)
	}
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.bill_info_box{
		width: calc(90vw);
		.bill_info_type_icon{
			display: flex;
			align-items: center;
			.estate_info_right{
				padding-left: 10rpx;
				width: 50%;
				.info_type_name{
					max-width: 90%;
					margin-left: 10rpx;
				}
				.info_money{
					text-align: start;
					color: v-bind(primary_text_hot_color);
				}
			}
		}
		.info_money{
			font-size: 60rpx;
			width: 100%;
			text-align: center;
			margin: 10rpx 0;
		}
		.info_money_add{
			color: v-bind(primary_text_hot_color);
		}
		.info_footer{
			.info_item{
				display: flex;
				margin: 10rpx 0;
				font-size: 30rpx;
				.info_title{
					margin-right: 20rpx;
					width: 10%;
					color: v-bind(shallow_text_color);
					display: flex;
					align-items: center;
				}
				.info_data{
					width: 80%;
					display: flex;
					align-items: center;
					.info_user_name{
						width: 80%;
						margin-left: 10rpx;
					}
				}
				.link{
					color: v-bind(primary_cool_color) !important;
				}
			}
		}
		.info_handle{
			display: flex;
			justify-content: space-around;
		}
	}
</style>